localStorage.setItem("eat", JSON.stringify(datas));
var students = localStorage.getItem("eat");



$(function () {

    students = JSON.parse(students);



    // 分页
    let page = 1;//第几页
    let no = 0;//显示的页数的第一个对象是数组中的第几个对象，初始下标为0
    let xuhao = students.length;
    for (let i = 0; i < 5; i++) {//初始页面信息显示
        let student = $("<tr>" + "<td>" + (i + 1) + "</td>" + "<td>" + students[i].htNumber + "</td>" + "<td>" + students[i].main + "</td>" + "<td>" + students[i].quyu + "</td>" + "<td>" + students[i].businessName + "</td>" + "<td>"
            + students[i].businessType + "</td>" + "<td>" + students[i].inTentType + "</td>" + "<td>" + students[i].htzt + "</td>" + "<td>" + students[i].InvestmentPer + "</td>" + "<td>" + students[i].StartTime + "</td>" + "<td>" + students[i].EndTime + "</td>" + "<td> <button class=\"check\">详情</button> <button class=\"modify\">编辑</button><button>删除</button>   </td>" + " </tr>");
        $("tbody").append(student);
    }
    $("tbody").trigger("create");         //trigger() 方法触发被选元素上指定的事件以及事件的默认行为（比如表单提交）
    $("#pgn").text(page);
    $("#en").text(xuhao);
    $("#add").click(function () {       //点击新增按钮触发的动作
        $("#asi").show();
        $('#asi').animate({
            top: '70px',
        }, 500)

    });

    shanchu();


    let objKeys = ["htNumber", "main", "quyu", "businessName", "businessType", "inTentType", "htzt", "InvestmentPer", "StartTime", "EndTime", "caozuo"];
    $("#submit").click(function () {//提交按钮点击触发的动作
        let student = {};
        let isEmpty = false;
        $("#asi").find("input").each(function (index, domEle) {
            if (!domEle.value) {//如果添加时表单内有值为空，则不进行添加
                isEmpty = true;

            }
            student[objKeys[index]] = domEle.value;
        });
        if (!isEmpty) {
            students[xuhao] = student;
            xuhao++;
            $("#en").text(xuhao);


            let lpren = $("tbody tr").length - 1;//最后一页剩余的条目数;
            if (no + 5 > xuhao && lpren < 5) {//增加一个append函数，如果显示的是最后一页那么需要更新界面。
                $("tbody tr:last").after("<tr>" + "<td>" + (no + lpren + 1) + "</td>" + "<td>" + student.htNumber + "</td>" + "<td>" + student.main + "</td>" + "<td>" + student.quyu + "</td>" + "<td>" + student.businessName + "</td>" + "<td>"
                    + student.businessType + "</td>" + "<td>" + student.inTentType + "</td>" + "<td>" + student.htzt + "</td>" + "<td>" + student.InvestmentPer + "</td>" + "<td>" + student.StartTime + "</td>" + "<td>" + student.EndTime + "<td>" + "<td> <button class=\"check\">详情</button> <button class=\"modify\">编辑</button><button>删除</button>  </td>" + " </tr>");

            }

        }


        $("#asi").animate({
            top: "500px",
        },
            500);
        $("#asi").fadeOut(500);



    });




    $("tbody").on("click", ".check", function () {//点击查看按钮触发的动作

        $("#chesi").show();
        $('#chesi').animate({
            top: '70px',
        }, 500)

        let stuIndex = $(this).parent().parent().find("td")[0].innerText - 1;
        // let i = 0;
        $("#chesi").find("input").each(function (index, domEle) {
            domEle.value = students[stuIndex][objKeys[index]];//index->i
        });
    });

    let modifyNumber;

    $("tbody").on("click", ".modify", function () {//点击修改按钮触发的动作,解决了jQuery出现的新添加元素点击事件无效问题
        // $("#sbg").addClass("sbg");

        $("#chasi").show();
        $('#chasi').animate({
            top: '70px',
        }, 500)

        modifyNumber = $(this).parent().parent().find("td")[0].innerText - 1;
        let i = 0;
        $("#chasi").find("input").each(function (index, domEle) {
            domEle.value = students[modifyNumber][objKeys[i++]];
        });
    });


    $("#save").click(function () {//点击保存按钮触发的动作
        $("#chasi").find("input").each(function (index, domEle) {
            if (domEle.value)
                students[modifyNumber][objKeys[index]] = domEle.value;
        });
        $("tbody tr").eq(modifyNumber - no + 1).remove();
        $("tbody tr").eq(modifyNumber - no).after("<tr>" + "<td>" + (modifyNumber - no + 1) + "</td>" + "<td>" + students[modifyNumber].htNumber + "</td>" + "<td>" + students[modifyNumber].main + "</td>" + "<td>" + students[modifyNumber].quyu + "</td>" + "<td>" + students[modifyNumber].businessName + "</td>" + "<td>"
            + students[modifyNumber].businessType + "</td>" + "<td>" + students[modifyNumber].inTentType + "</td>" + "<td>" + students[modifyNumber].htzt + "</td>" + "<td>" + students[modifyNumber].InvestmentPer + "</td>" + "<td>" + students[modifyNumber].StartTime + "</td>" + "<td>" + students[modifyNumber].EndTime + "</td>" + "<td> <button class=\"check\">详情</button> <button class=\"modify\">编辑</button><button>删除</button>   </td>" + " </tr>");


        $("#chasi").animate({
            top: "500px",
        },
            500);
        $("#chasi").fadeOut(500);


        // $("#chasi").hide();
        shanchu();

    });


    $(".cancel").click(function () {//多个取消按钮点击触发的动作

        $(".achaesi").animate({
            top: "500px",
        },
            500);
        $(".achaesi").fadeOut(500);

        // $(".achaesi").hide();

    });


    $("tbody tr td:first").click(function () {//全选操作用到了JQuery的隐示迭代
        $("tbody tr td input").prop("checked", $("tbody tr:first td:first input").prop("checked"));
    });

    $("tbody").on("click", $("tbody tr:nth-of-type(1)").siblings().find("input"), function () {
        let isSelectAll = true;
        $("tbody tr:nth-of-type(1)").siblings().find("input").each(function (index, domEle) {
            if ($(domEle).prop("checked") == false)
                isSelectAll = false;
        });
        $("tbody tr:first td:first input").prop("checked", isSelectAll);
    })


    // 添加
    let update = (no) => {
        let i = 0;//用于增加信息条目的变量;
        $("tbody tr:first").siblings().remove();//清空界面
        while (i < 5 && no + i < xuhao) {
            let student = $("<tr>" + "<td>" + (no + i + 1) + "</td>" + "<td>" + students[no + i].htNumber + "</td>" + "<td>" + students[no + i].main + "</td>" + "<td>" + students[no + i].quyu + "</td>" + "<td>" + students[no + i].businessName + "</td>" + "<td>"
                + students[no + i].businessType + "</td>" + "<td>" + students[no + i].inTentType + "</td>" + "<td>" + students[no + i].htzt + "</td>" + "<td>" + students[no + i].InvestmentPer + "</td>" + "<td>" + students[no + i].StartTime + "</td>" + "<td>" + students[no + i].EndTime + "</td>" + "<td> <button class=\"check\">详情</button> <button class=\"modify\">编辑</button> <button>删除</button> </td>" + " </tr>");
            $("tbody").append(student);
            i++;
        }
        $("tbody").trigger("create");
        shanchu();

    }


    $("#cz").click(function () {
        update(no);
    });


    // 下一页
    $("#nextpage").click(function () {
        if (no + 5 < xuhao) {
            no += 5;
            page++;
            $("#pgn").text(page);
            update(no);
            $("tbody tr:first td:first input").prop("checked", false);

        } else {
            layer.alert("最后一页了")
        }

    });




    // 上一页
    $("#lastpage").click(function () {
        if (no - 5 >= 0) {
            no -= 5;
            page--;
            $("#pgn").text(page);
            update(no);
            $("tbody tr:first td:first input").prop("checked", false);

        } else {
            layer.alert("已经是第一页了")
        }

    });

})








$(function () {
    $("table button").mouseover(function () {
        $(this).css("opacity", "calc(0.8)");
    })
    $("table button").mouseout(function () {
        $(this).css("opacity", "calc(1)");
    })
})
$(function () {
    $(".chaxun button").mouseover(function () {
        $(this).css("opacity", "calc(0.8)");
    })
    $(".chaxun button").mouseout(function () {
        $(this).css("opacity", "calc(1)");
    })
})


function shanchu() {
    $("table tbody tr  button:nth-child(3) ").click(function () {
        $(this).parent().parent().remove();
    })

}







$("#btn1").click(function () {

    // $('#chaxun').innerHTML = '';
    $("tbody tr:first").siblings().remove();//清空界面
    let result = students.filter(function (item) { return item.htNumber == htbh.value });

    if (result.length >= 1) {
        (result).forEach(function (value) {
            chaxun.innerHTML += `<tr>     
                                             <td>${value.xuhao}</td>   
                                           <td>${value.htNumber}</td>
                                            <td>${value.main}</td>
                                            <td>${value.quyu}</td>
                                            <td>${value.businessName}</td>
                                            <td>${value.businessType}</td>
                                            <td>${value.inTentType}</td>
                                            <td>${value.htzt}</td>
                                            <td>${value.InvestmentPer}</td>
                                            <td>${value.StartTime}</td>
                                            <td>${value.EndTime}</td>
                                            <td>${value.caozuo}</td>
                                      </tr>`
        });

        // let a = result.length
        // $("#en").text(a);//更新条目数
        shanchu();
        $("table tbody tr  button:nth-child(1) ").addClass("check")
        $("table tbody tr  button:nth-child(2) ").addClass("modify")
    }
    if (result.length < 1) (

        layer.alert("没有")


    )
    htbh.value = "";


});
